<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>抢单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<style>
			.mui-slider-indicator.mui-segmented-control {
				background-color: #FFFFFF;
				height: 55px;
				text-align: center;
				padding-top: 10px;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
				width: 100%;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: 0;
				margin-top: 30px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 42px;
				max-width: 130px;
				height: 100px;
			}
			
			.doctor {
				color: #FFE5CC;
			}
			
			.mui-ellipsis {
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				font-weight: bold;
			}
			
			.tableUL {
				margin-top: 0.08rem;
			}
			
			.mui-badge {
				font-size: 12px;
				line-height: 1;
				display: inline-block;
				padding: 6px 9px;
				color: #FFFFFF;
				border-radius: 8px;
				background-color: #66cc99;
				width: 55px;
				/*background-color: rgba(0, 0, 0, .15);*/
			}
			
			.mui-badge-huise {
				color: #FFFFFF;
				background: rgba(0, 0, 0, .15);
				background-color: #aeaeae;
				width: 72px;
				margin-left: 6px;
				text-align: center;
			}
			
			.mui-badge-huise1 {
				color: #FFFFFF;
				background: rgba(0, 0, 0, .15);
				background-color: #aeaeae;
				width: 70px;
				text-align: center;
				margin-left: 6px;
			}
			
			.mui-badge-red {
				color: #FFFFFF;
				background: #ff9900;
			}
			
			.mui-badge-green {
				color: #FFFFFF;
				background: #ff0000;
			}
			
			.mui-badge-green2 {
				color: #FFFFFF;
				background: #669966;
			}
			
			.mui-col-xs-8 {
				width: 70%;
			}
			
			.mui-col-xs-4 {
				width: 33%;
			}
			
			@media screen and (min-width: 320px) {
				.mui-col-xs-8 {
					width: 60%;
				}
				.mui-col-xs-4 {
					width: 33%;
					text-align: right;
				}
			}
			
			@media screen and (min-width: 400px) {
				.mui-col-xs-8 {
					width: 60%;
				}
				.mui-col-xs-4 {
					width: 33%;
					text-align: right;
				}
				.mui-col-xs-10 {
					width: 60%;
				}
			}
			
			.mui-fullscreen .mui-segmented-control~.mui-slider-group {
				top: 40px;
			}
			
			.widthdaxiao {
				width: 15%;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #4d7acf;
			}
			
			.mui-segmented-control {
				font-size: 12px;
				font-weight: 400;
				position: relative;
				display: table;
				overflow: hidden;
				width: 100%;
				table-layout: fixed;
				border: 1px solid #4d7acf;
				border-radius: 3px;
				background-color: transparent;
				-webkit-touch-callout: none;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #4d7acf;
				font-weight: bold;
				font-size: 0.28rem;
			}
			
			.cus_title_01 {
				color: #EFEFEF;
				font-weight: 500;
				background-color: #aab940;
				border-radius: 0 10px 10px 0;
				padding: 10px 15px 10px 15px;
				margin-left: -15px;
			}
			
			.cus_title_02 {
				color: #EFEFEF;
				font-weight: 500;
				background-color: #91a9cd;
				border-radius: 0 10px 10px 0;
				padding: 10px 15px 10px 15px;
				margin-left: -15px;
			}
			
			.dot_qiangdan {
				width: 20%;
				/*border: 1px solid red;*/
				min-height: 184px;
			}
			
			.dot_qiangdan .red_km {
				font-size: 0.28rem;
				color: #000;
			}
			
			.greentip {
				position: relative !important;
				/*overflow: hidden !important;*/
				height: 33px !important;
				padding-bottom: 25px;
				width: 100% !important;
				background-color: #aab940 !important;
				color: #fff;
				border-radius: 0 12px 12px 0;
			}
			
			.left {
				float: left;
			}
			
			.mui-table-view-cell {
				width: 100%;
				height: 37px;
			}
			
			.psentthree .psentone .clear_float {
				overflow: hidden;
			}
			
			b,
			strong {
				font-weight: 700;
				font-size: 0.28rem;
			}
			
			ul {
				font-size: 0.28rem;
				color: #8f8f94;
			}
			
			.editor_one {
				margin: 5px 0 2px 0 !important;
				padding-left: 7px !important;
				width: 100% !important;
				height: 36px !important;
				line-height: 36px !important;
				color: #fff !important;
				background-color: #ca9090 !important;
			}
			/*.mui-scroll {
				background-Color: #fff;
			}*/
			
			.mui-card {
				margin: 0px;
				margin-top: 15px;
				border-radius: 0px;
			}
			
			.mui-card .mui-table-view .mui-table-view-cell:first-child,
			.mui-card .mui-table-view .mui-table-view-divider:first-child {
				border-top-left-radius: 0px;
				border-top-right-radius: 12px;
			}
			
			.cus-mui-title {
				margin: 5px 0 2px 0;
				padding-left: 7px;
				width: 100%;
				height: 36px;
				line-height: 36px;
				color: #fff;
				background-color: #ca9090;
			}
			
			.mui-confirm-button {
				margin-top: 60px;
				margin-left: 6px;
				margin-top: 37px;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				/* width: 80%; */
				max-width: 45%;
				margin: 0 auto;
				display: table;
				padding-top: 50px;
			}
			
			#sliderSegmentedControl {
				margin-top: 20px;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="padding-top:5%;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="ptitle">抢单</h1>
		</header>

		<div class="mui-content" id="content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item2mobile" id="homeItem">
						离家最近
					</a>
					<a class="mui-control-item" href="#item3mobile" id="workItem">
						离医院最近
					</a>
				</div>

				<div id="sliderProgressBar" class="mui-slider-progress-bar" style="width: 50%;"></div>

				<div class="mui-slider-group">
					<div id="item2mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" id="homeDataDiv">
								<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" id="workDataDiv">
								<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="../js/constants.js"></script>
	<script type="text/javascript" src="../js/sharemethods.js"></script>
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>

	<script type="text/javascript" src="../plugs/moment/moment.min.js"></script>
	<script type="text/javascript" src="../plugs/art/template-web.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.art.extend.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.template.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		mui.plusReady(function() {

			setPagePos();
			// 加载完毕后关闭等待框，并展示页面
			var currentView = plus.webview.currentWebview();
			currentView.show('slide-in-right', 200);
			plus.nativeUI.closeWaiting();
		});

		mui('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条
		});

		var getUserInfo = function() {
			divId = $(".mui-slider-group .mui-active").attr("id");
			if(divId == "item2mobile") {
				$("#homeDataDiv").html("");
				homepage = 1;
				getHomeData(userId, homepage);
			} else if(divId == "item3mobile") {
				$("#workDataDiv").html("");
				workpage = 1;
				getWorkData(userId, workpage);
			}
		}

		var homepage = 1;
		var workpage = 1;
		var userId = null;
		var accessToken = null;
		mui.plusReady(function() {
			userId = localStorage.getItem("USERID");
			accessToken = localStorage.getItem("ACCESSTOKEN");
			$("#homeDataDiv").html("");
			getHomeData(userId, homepage);

			mui(".mui-content").on("tap", ".nui-order-detail", function() {
				var orderId = $(this).attr("data-id");
				mui.openWindow({
					url: '../order/grab_order_detail.html',
					id: 'grab_order_detail',
					extras: {
						orderId: orderId
					},
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
					},
					waiting: {
						autoShow: true, //自动显示等待框，默认为true
						title: '正在加载...', //等待对话框上显示的提示内容

					}
				});
			});
		});

		mui("#sliderSegmentedControl").on("tap", "a", function() {
			console.log(this.id)
			if(this.id == "homeItem") {
				$("#homeDataDiv").html("");
				homepage = 1;
				getHomeData(userId, homepage);
			} else if(this.id == "workItem") {
				$("#workDataDiv").html("");
				workpage = 1;
				getWorkData(userId, workpage);
			}
		});

		mui(".mui-content").on("tap", ".mui-confirm-button", function() {
			var url = confirmorderUrl + this.id;
			var btnArray = ['否', '是'];
			mui.confirm('是否确认接此定单并为其服务？', '抢单提示', btnArray, function(e) {
				if(e.index == 1) {
					var sussess = function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if(data.result == "success") {
							mui.toast("抢单成功");
							$("#homeDataDiv").html("");
							homepage = 1;
							getHomeData(userId, homepage);
							$("#workDataDiv").html("");
							workpage = 1;
							getWorkData(userId, workpage);
						} else {
							mui.toast(data.msg);
						}
					};
					commonHttpUtils(url, "put", {
						id: userId
					}, sussess, error);
				}
			})

		});

		function getHomeData(id, page) {
			var homeurl = showhomenothavelistUrl + id;
			var sussess = function(data) {
				if(data.result == "success") {
					if(data.obj.homeorders.length != 0) {
						if(data.obj.homeorders.length == 5) {
							homepage = homepage + 1;
						}
						for(var ele in data.obj.homeorders) {
							var homeorder = data.obj.homeorders[ele];
							$("#homeDataDiv").processTL(templateRegister.orderGrab,homeorder)
						}
					} else {
						$("#homeDataDiv").append('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
					}
				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(homeurl, "get", "", sussess, error);
		}

		function getWorkData(id, page) {
			var workurl = showworknothavelistUrl + id;
			var sussess = function(data) {
				//服务器返回响应，根据响应结果，分析是否登录成功；
				if(data.result == "success") {
					console.log(data.obj.workorders.length)
					if(data.obj.workorders.length != 0) {
						if(data.obj.workorders.length == 5) {
							workpage = workpage + 1;
						}
						for(var ele in data.obj.workorders) {
							var homeorder = data.obj.workorders[ele];
							//if(homepage !=1){}//预留
							//$("#workDataDiv").append(processHome(homeorder));
							$("#workDataDiv").processTL(templateRegister.orderGrab,homeorder)
						}
					} else {
						$("#workDataDiv").append('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
					}
				} else {
					mui.toast(data.msg);
				}
			}
			commonHttpUtils(workurl, "get", "", sussess, error);
		}

		function processHome(data) {

			var year = data.timeinterval.intervalbegin.substring(0, 10);
			year = year.replaceAll("-", "/")
			var startDay = data.timeinterval.intervalbegin.substring(11, 16);
			var endDay = data.timeinterval.intervalend.substring(11, 16);

			var str = '';
			str = str + '<div class="mui-card">';
			if(data.isrecommend) {
				str = str + '<div class="cus-mui-title">系统推荐订单：抢单可获得额外爱心值20！</div>';
			}
			str = str + '<div class="mui-card-content">';
			str = str + '<ul class="mui-table-view left nui-order-detail" data-id="' + data._id + '" style="width: 80%; padding-top:0px;">';
			str = str + '<li class="mui-table-view-cell greentip">';
			str = str + '<span class="mui-icon iconfont icon-sj"></span> <span class="mui-icon iconfont icon-wd"></span>预约时间：' + year + ' ' + startDay + '-' + endDay;
			str = str + '</li>';
			str = str + '<li class="mui-table-view-cell">';
			str = str + '<span class="mui-icon iconfont icon-dz"></span> <strong>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</strong>: ' + data.customer.homeaddress;
			str = str + '</li>';
			str = str + '<li class="mui-table-view-cell">';
			str = str + '<span class="mui-icon iconfont icon-fbz"> <strong>发&nbsp;布&nbsp;者</strong>&nbsp;: <span class="zhangxin">' + data.username + '</span>';
			str = str + '</li>';
			str = str + '<li class="mui-table-view-cell">';
			str = str + '<span class="mui-icon iconfont icon-fwxm"> <strong>服务项目</strong>：<span class="zhangxin">' + data.serviceitem + '</span>';
			str = str + '</li>';
			str = str + '<li class="mui-table-view-cell">';
			str = str + '<span class="mui-icon iconfont icon-je"> <strong>服&nbsp;务&nbsp;费</strong>&nbsp;：';
			str = str + '<span class="orange">' + data.price.serviceprice + '/' + data.price.time + '次</span>';
			str = str + '</li>';
			str = str + '</ul>';
			str = str + '<div class="dot_qiangdan left" style="background-color: #FFF;padding-right: 10px;padding-top:37px!important;">';
			str = str + '<span class="mui-icon iconfont icon-dz" style="margin-left: 6px; margin-top: 10px;"> <span class="red_km">' + (data.distance / 1000).toFixed(2) + 'km</span>';
			str = str + '<img src="../images/order/qiangdan.png" alt="" class="mui-confirm-button" id="' + data._id + '"/>';
			str = str + '</div>';
			str = str + '</div>';
			str = str + '</div>';
			return str;
		}
	</script>

</html>